<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: zhangjx
 * @Date: 2023-03-08 09:28:27
 * @LastEditors: uphldjx 1373577124@qq.com
 * @LastEditTime: 2023-08-23 19:07:24
-->
<template>
	<div class="wrapper">
		<div class="w-left" v-if="slotAttr.left">
			<slot name="left"></slot>
		</div>

		<div class="w-main flex1">
			<slot></slot>
		</div>

		<div class="w-right" v-if="slotAttr.right">
			<slot name="right"></slot>
		</div>
	</div>
</template>

<script setup lang="ts">
import { useSlots } from 'vue'
const slotAttr = useSlots()
</script>
<style scoped lang="scss">
.wrapper {
	width: 100%;
	// width: calc(98vw - var(--vt-nav-aside-width));
	min-height: 90%;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	padding: vw(10);
	border-radius: 10px;
	position: relative;
  top:1rem;
	.w-left {
		width: var(--w-left-gap);
		min-width: 15rem;
		height: 100%;
		padding: vw(10);
		position: relative;
	}

	.w-main {
		// display: grid;
		position: relative;
		width: inherit;
	}

	.w-right {
		width: vw(200);
	}
}
</style>
